<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--    vue 文件-->
    <script type="text/javascript" src="js/vue.js"></script>

</head>
<body>
<div id="app">

    <h1>{{text}}</h1>
    <h1>{{text01}}</h1>
    <div v-text="text"></div>
    <button @click="fun01()">点击按钮</button>
    <hr/>
    <ul>
        <li v-for="(item,index) in items ">{{item.name}}</li>
    </ul>
    <hr/>
    <div v-if="data1">红红火火恍恍惚惚</div>
    <button @click="data1 = !data1">点击按钮</button>
    <div v-show="!data1">凄凄切切群群群群群群</div>
    <hr/>
    <input v-model="inputData">
    <button @click="fun02">确定</button>
    <button @click="fun03">修改</button>

</div>
<script>
    let app = new Vue({
        // 挂载点
        el: '#app',
        // 定义变量
        data: {
            text: 'H1标签',
            text01: 'H2 标签',
            items: [
                {
                    id: 1,
                    name: '张三'
                },
                {
                    id: 2,
                    name: '张三1'
                },
                {
                    id: 3,
                    name: '张三2'
                }
            ],
            data1: false,
            inputData: ''
        },
        // 定义方法的地方
        methods: {
            //fun01 方法名字 () 参数  {} 方法体
            fun01() {
                console.log(123)
                this.text = 'hhhhhhh'
            },
            fun02() {
                console.log('输入框的内容为: ', this.inputData)
            },
            fun03() {
                this.inputData = '新的内容'
            }
        }
    })
</script>

</body>
</html>